<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${singleArticle.getTitle()}</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/favicon.png">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Custom icon font-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/fontastic.css">
    <!-- Fancybox-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/@fancyapps/fancybox/jquery.fancybox.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.pink.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom.css">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="container">
    <div class="row">
        <!-- Latest Posts -->
        <%--      start 主体--%>
        <main class="post blog-post col-lg-8">
            <div class="container">
                <div class="post-single">
                    <%--                    标题--%>
                    <div class="post-thumbnail"><img src="${singleArticle.getImage()}" alt="..." class="img-fluid">
                    </div>
                    <div class="post-details">
                        <%--种类--%>
                        <div class="post-meta d-flex justify-content-between">
                            <div class="category"><a href="#">Business</a><a href="#">Financial</a></div>
                        </div>
                        <%--                            题目--%>
                        <h1>${singleArticle.getTitle()}<a href="#"><i
                                class="fa fa-bookmark-o"></i></a></h1>
                        <div class="post-footer d-flex align-items-center flex-column flex-sm-row"><a href="#"
                                                                                                      class="author d-flex align-items-center flex-wrap">
                            <div class="avatar"><img src="img/avatar-1.jpg" alt="..." class="img-fluid"></div>
                            <div class="title"><span>John Doe</span></div>
                        </a>
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="date"><i class="icon-clock"></i>${singleArticle.getPhTime()}</div>
                                <div class="views"><i class="icon-eye"></i>${singleArticle.getNumber()} </div>
                                <div class="comments meta-last"><i
                                        class="icon-comment"></i>${singleArticle.getVoteNumber()}</div>
                            </div>
                        </div>
                        <%--                        正文--%>
                        <div class="post-body">
                            ${singleArticle.getContent()}
                        </div>
                    </div>


                    <div class="post-comments">
                        <header>
                            <h3 class="h6">文章最新评论<span class="no-of-comments">${singleArticle.getVoteNumber()}</span>
                            </h3>
                        </header>

                        <c:forEach items="${votes}" var="vote">
                            <div class="comment">
                                <div class="comment-header d-flex justify-content-between">
                                    <div class="user d-flex align-items-center">
                                        <div class="image"><img src="${pageContext.request.contextPath}/img/visitor.png"
                                                                alt="..."
                                                                class="img-fluid rounded-circle"></div>
                                        <div class="title"><strong>${vote.getVoteName()}</strong><span
                                                class="date">${vote.getVoteTime()}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="comment-body">
                                    <p>${vote.getVoteContent()}</p>
                                </div>
                            </div>
                        </c:forEach>
                    </div>

                    <%--                        添加评论--%>
                    <div class="add-comment">
                        <header>
                            <h3 class="h6">添加评论</h3>
                        </header>
                        <form action="${pageContext.request.contextPath}/index?method=addVote" class="commenting-form"
                              method="post">
                            <input type="text" hidden value="${singleArticle.getId()}" name="id">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <input type="text" name="username" id="username" placeholder="评论者姓名"
                                           class="form-control" autocomplete="off">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="email" name="email" id="useremail"
                                           placeholder="联系方式" class="form-control" autocomplete="off">
                                </div>
                                <div class="form-group col-md-12">
                                    <!--这个控件一定要写在一起-->
                                    <textarea name="voteContent" id="voteContent" placeholder="输入评论"
                                              class="form-control"></textarea>
                                </div>
                                <div class="form-group col-md-12">
                                    <button type="submit" class="btn btn-secondary">提交评论</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
        <%--      end  主体--%>
        <jsp:include page="common/aside.jsp"/>
    </div>
</div>
<%--页尾--%>
<!-- Page Footer-->
<jsp:include page="common/footer.jsp"/>
<!-- JavaScript files-->
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/popper.js/umd/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="${pageContext.request.contextPath}/vendor/@fancyapps/fancybox/jquery.fancybox.min.js"></script>
<script src="${pageContext.request.contextPath}/js/front.js"></script>
</body>
</html>
